<template>
  <div class="asset-box">
      <Card style="width:320px" dis-hover>
        <div style="text-align:left">
            <!-- <h3>债券型基金资产：<span class="tip-color">{{fund_rate/ 100 * assets }}({{ fund_rate }}%)</span></h3> -->
            <!-- <h3>股票型基金资产：<span class="tip-color">{{stock_rate * assets / 100}}({{ stock_rate }}%)</span></h3> -->
            <h3>债券型基金资产：<span class="tip-color">{{ assetData.type_list[1][0]/ 100 * assetData.assets }}({{ assetData.type_list[1][0] }}%)</span></h3>
            <h3>股票型基金资产：<span class="tip-color">{{ assetData.type_list[1][1] / 100 * assetData.assets }}({{ assetData.type_list[1][1] }}%)</span></h3>
        </div>
    </Card>
    <amountBar class="test" :type_list="assetData.type_list"></amountBar>
    
  </div>
</template>

<script>
// import func from 'vue-editor-bridge'
import amountBar from './charts/AmountBar'

export default {
    components:{
      amountBar
    },
    props:['assetData'],
    // props:{
    //   assetData:{
    //     type:Object,
        
    //   }
    // },
    data(){
        return {
            // fund_rate:this.assetData.type_list[1][0],
            // stock_rate:this.assetData.type_list[1][1],
            // assets:this.assetData.assets,
        }
    },
    computed:{
      fund_rate (){
        return this.assetData.type_list[1][0]
      },
      stock_rate(){
        return this.assetData.type_list[1][1]
        
      },
      assets()  {
        return this.assetData.assets
      }
    },
     
}
</script>

<style scoped>
.asset-box{
    display: flex;
    justify-content: flex-start;
}
.test {
  margin-left: 100px;
}
.tip-color{
    color:#ff9900;
}
</style>